<template>
	<view class="home">
		<navbar :isback='false' title="达人商单" backgroundColor='rgba(248, 248, 253, 1)'>
			<view slot="left" class="hleft">
				<!-- <image class="gllogo" src="/static/LOGO.png" /> -->
			</view>
		</navbar>
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent">
			<view class="dasou">
				<image class="dinicon" src="/static/new/dinicon.png" />
				<text class="diname">广州</text>
				<text class="soushu"></text>
				<u-input style="flex: 1;" v-model="keyword" type="text" :border="false" placeholder="商家POI / 任务 / 已报名达人" />
				<image class="souicon" @click="getClear" src="/static/new/souicon.png" />
			</view>
			<view class="daqie">
				<view class="qieleft">
					<view class="qieitem " :class="head == 1 ? 'qieactive' : ''" @click="headClick(1)">探店</view>
					<view class="qieitem" :class="head == 2 ? 'qieactive' : ''" @click="headClick(2)">云剪</view>
					<view class="qieitem" :class="head == 3 ? 'qieactive' : ''" @click="headClick(3)">直播</view>
				</view>
				<view class="qieright ml">
					<text class="mzuiai">我的最爱</text>
					<text class="aishu"></text>
					<text class="shainame" @click="shaipopshow = true">筛选</text>
					<image class="shaiicon" @click="shaipopshow = true" src="/static/new/shai.png" />

				</view>
			</view>

			<!-- <view class="xin" v-if="isxin">
					<view class="hone">
					<image class="bg" src="/static/bg.png" mode="" />
					<view class="honeitem">
						<view class="htui">
							推荐达人商单协作平台
						</view>
					</view>
				</view>
				<image class="xianicon" src="/static/xian.png" mode="" />
				<view class="daone">
					<text class="daname">派发商单</text>
					<text class="damiao">从派单到结算，清晰不忙乱</text>
					<view class="daoitem">
						<view class="items">
							<image class="boicon" src="/static/boicon.png" mode="" />
							<text>直播</text>
						</view>
						<view class="items iactive">
							<image class="boicon" src="/static/btwo.png" mode="" />
							<text>探店</text>
						</view>
						<view class="items">
							<image class="boicon" src="/static/yunjian.png" mode="" />
							<text>云剪</text>
						</view>
					</view>
					<view class="shangdan">
						<view class="shangbtn">开始派单</view>
					</view>
				</view>
				
				</view> -->
			<view class="baoview" style="padding:0 40rpx;" v-if="isxin">
				<BaoMing :baotitle="baotitle" :baisub="baisub" :btntitle="btntitle" :btnmiao="btnmiao" lei="jing"></BaoMing>
			</view>


			<view class="hlist">
				<text class="gengname" v-if="isxin">更多商单</text>
				<view class="hitem" v-for="(item, index) in list" :key="index" @click="getDetail(item)">
					<view class="homehone">
						<!-- <image class="tou2" src="/static/tou2.png" /> -->
						<view class="touview">
							<image class="touimg" v-if="head == 1" src="/static/new/hone.png" />
							<image class="touimg" v-if="head == 2" src="/static/new/htwo.png" />
							<image class="touimg" v-if="head == 3" src="/static/new/hthree.png" />
						</view>
						<view class="oright">
							<text class="oname txt">{{ item.title }}</text>
							<view class="hxian"></view>
							<view class="xun">
								<image class="taolun" src="/static/new/taolun.png" />
								<text class="fuwu">服务商</text>
								<text class="fuwumiao txt">实探宝子们快来报名啦</text>
							</view>

						</view>
					</view>
					<view class="htwo">
						<view class="twoleft">
							<view class="tbiao">
								<text>价格适中</text>
							</view>
							<view class="tbiao">
								<text>刚刚发布</text>
							</view>
						</view>
						<view class="tworight">
							<view class="baojin">
								<text class="jinname">报名进度</text>
								<view class="jindu">
									<view class="jins"></view>
								</view>
							</view>
							<view class="baobtn" v-if="index == 0">
								抢先
							</view>
							<view class="baobtn" v-if="index == 1">
								报名
							</view>
							<view class="baobtn cha" v-if="index == 2">
								查看
							</view>
						</view>
					</view>
				</view>

				<view class="chageng" v-if="status=='loadmore'" @click="loadmore">
					<text>查看更多</text>
					<image class="xia" src="/static/new/xia.png" />
				</view>
			</view>
		</view>
		<!-- 筛选弹窗开始 -->
		<view class="pop">
			<u-popup v-model="shaipopshow" mode="bottom">
				<view class="spopview">
					<image class="guan" src="/static/new/guan.png" />
					<scroll-view scroll-y class="shaione">
						<view class="shaihead">
							<text class="shaitit">排列顺序</text>
							<view class="shailist">
								<view class="shaiitem">不限</view>
								<view class="shaiitem">不限</view>
								<view class="shaiitem">不限</view>
								<view class="shaiitem">不限</view>
								<view class="shaiitem">不限</view>
							</view>
						</view>
						<view class="shaihead">
							<text class="shaitit">排列顺序</text>
							<view class="shailist">
								<view class="shaiitem">不限</view>
								<view class="shaiitem">不限</view>
								<view class="shaiitem">不限</view>
								<view class="shaiitem">不限</view>
								<view class="shaiitem">不限</view>
							</view>
						</view>
					</scroll-view>
					<view class="shaitwo">
						<view class="zhongzhipop">重置</view>
						<view class="zhongzhipop que">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 筛选弹窗结束 -->
		<Tabbar :tabIndex="1"></Tabbar>
</view>
</template>
<script>
import BaoMing from '@/components/BaoMing/BaoMing'
export default {
	components: {
		BaoMing
	},
	data() {
		return {
			bgcolor: '#fff',
			keyword: '',
			head: 1,//
			isxin: true,
			baotitle: '派发商单',
			baisub: '从派单到结算，清晰不忙乱',
			btntitle: '开始派单',
			btnmiao: '',
			shaipopshow: false,
			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			category_id: '',//分类id
			category: '',//商单类目
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {

	},
	created() {
		uni.hideTabBar()
	},
	async onLoad() {
		this.getList()
	},
	beforeCreate() {
		uni.hideTabBar()
	},
	async onShow() {

	},
	onReachBottom: function () {
	},
	methods: {
		async getList() {
			let res = await this.$u.api.projectlist({
				keyword: this.keyword,
				page: this.page,
				category_id: this.category_id,
				category: this.category
			});
			console.log(res)
			this.last_page = res.last_page;
			let list = res.data;
			this.list = this.page == 1 ? list : [...this.list, ...list];
			if (this.page >= this.last_page) {
				this.status = 'nomore';
			}
		},
		getClear() {
			this.list = []
			this.page = 1,
				this.status = "loadmore"
			this.getList()
		},
		loadmore() {
			let page = this.page;
			// let last_page = this.last_page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		headClick(e) {
			this.head = e
		},
		getDetail(item) {
			this.navrouter("/pages_subject/twoPage/SDDetail?id="+item.id);
		}
	}
}
</script>

<style lang="scss" scoped>
.newcontent {
	min-height: 100vh;
	background-color: #f8f8fd;
	padding-bottom: 100px;

	.dasou {
		margin: 20rpx 40rpx;
		border-radius: 12px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 6px 10px rgba(119, 102, 231, 0.08);
		padding: 5px 10px;
		display: flex;
		flex-direction: row;
		align-items: center;

		.dinicon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 5px;
		}

		.diname {
			font-size: 12px;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.soushu {
			height: 20px;
			width: 1px;
			display: inline-block;
			margin-left: 10px;
			margin-right: 10px;
			background-color: rgba(232, 232, 252, 1);
		}

		.souicon {
			margin-left: 20rpx;
			width: 18px;
			height: 18px;
		}
	}

	.daqie {
		display: flex;
		flex-direction: row;
		margin: 15px 20px 16px;

		.qieleft {
			display: flex;
			flex-direction: row;
			align-items: center;

			.qieitem {
				font-size: 20px;
				font-weight: 400;
				margin-right: 20px;
				display: inline-block;
				color: rgba(153, 153, 153, 1);
			}

			.qieactive {
				color: rgba(51, 51, 51, 1);
			}
		}

		.qieright {
			display: flex;
			flex-direction: row;
			align-items: end;
			padding-bottom: 5rpx;

			.mzuiai {
				font-size: 12px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			.aishu {
				height: 15px;
				width: 1px;
				display: inline-block;
				margin-left: 10px;
				margin-right: 10px;
				background-color: rgba(232, 232, 252, 1);
			}

			.shainame {
				font-size: 12px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);

			}

			.shaiicon {
				width: 18px;
				height: 18px;
			}
		}
	}

	.hlist {
		display: flex;
		flex-direction: column;
		padding: 0 20px;

		.hitem {
			padding: 20px;
			border-radius: 12px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 6px 10px rgba(119, 102, 231, 0.08);
			margin-bottom: 20px;
			display: flex;
			flex-direction: column;

			.homehone {
				display: flex;
				flex-direction: row;

				.tou2 {
					width: 60px;
					height: 60px;
					border-radius: 10px;
					margin-right: 20px;
				}

				.touview {
					width: 60px;
					height: 60px;
					border-radius: 9px;
					background: rgba(248, 248, 253, 1);
					margin-right: 20px;
					display: flex;
					align-items: center;
					justify-content: center;

					.touimg {
						width: 36px;
						height: 36px;
					}
				}

				.oright {
					flex: 1;
					display: flex;
					flex-direction: column;

					.oname {
						font-size: 18px;
						font-weight: 700;
						color: rgba(51, 51, 51, 1);
					}

					.hxian {
						border: 1px dashed rgba(232, 232, 232, 1);
						display: inline-block;
						margin: 10px 0 5px;
					}

					.xun {
						display: flex;
						flex-direction: row;
						align-items: center;

						.taolun {
							margin-right: 3px;
							width: 18px;
							height: 18px;
						}

						.fuwu {
							font-size: 14px;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
						}

						.fuwumiao {
							margin-left: 5px;
							max-width: 65%;
							font-size: 14px;
							font-weight: 400;
							display: inline-block;
							color: rgba(102, 102, 102, 1);
						}
					}
				}

			}

			.htwo {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 12px;

				.twoleft {
					display: flex;
					flex-direction: column;
					margin-right: 20px;

					.tbiao {
						display: flex;
						flex-direction: row;
						margin-bottom: 5px;

						text {
							display: inline-block;
							padding: 3px 8px;
							border-radius: 3px;
							background: rgba(248, 248, 253, 1);
							font-size: 12px;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
						}
					}

					.tbiao:last-child {
						margin-bottom: 0;
					}

				}

				.tworight {
					border-radius: 50px 50px;
					border-width: 1px 1px 1px 1px;
					border-style: solid;
					border-color: rgba(220, 214, 255, 1);
					height: 45px;
					flex: 1;
					display: flex;
					flex-direction: row;

					.baobtn {
						width: 85px;
						height: 100%;
						opacity: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 16px;
						font-weight: 700;
						border-radius: 0 50px 50px 0;
						color: rgba(255, 255, 255, 1);
						border-radius: 0px 50px, 50px, 0px;
						background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
					}

					.cha {
						background: rgba(255, 255, 255, 1);
						color: rgba(119, 102, 231, 1);
						border: 1px solid rgba(119, 102, 231, 1);
					}

					.baojin {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding-left: 20px;

						.jinname {
							font-size: 12px;
							font-weight: 400;
							color: rgba(119, 102, 231, 1);
							display: block;
							margin-bottom: 2px;
						}

						.jindu {
							width: 80%;
							height: 6px;
							position: relative;
							border-radius: 3px;
							background: rgba(220, 214, 255, 1);

							.jins {
								width: 40%;
								height: 100%;
								position: absolute;
								left: 0;
								top: 0;
								background-color: rgba(119, 102, 231, 1);
								border-radius: 3px;
							}
						}
					}
				}
			}
		}
	}

	.chageng {
		width: 180px;
		height: 45px;
		opacity: 1;
		border-radius: 50px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 3px rgba(119, 102, 231, 0.63);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 0 auto;

		text {
			font-size: 16px;
			font-weight: 700;
			color: rgba(119, 102, 231, 1);
			display: inline-block;
			margin-right: 5px;
		}

		.xia {
			width: 18px;
			height: 18px;
		}
	}

	.hone {
		margin: 30rpx;
		height: 180rpx;
		opacity: 1;
		border-radius: 24rpx;
		position: relative;

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
		}

		.honeitem {
			position: relative;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.htui {
				width: 188px;
				height: 36px;
				opacity: 1;
				border-radius: 50px;
				background: rgba(255, 255, 255, 0.63);
				box-shadow: 0px 6px 10px rgba(119, 102, 231, 0.08);
				font-size: 14px;
				font-weight: 400;
				color: rgba(1, 117, 255, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 7%;

			}
		}
	}

	.xianicon {
		margin: 0px auto;
		width: 92%;
		height: 1px;
		display: block;
	}

	.daone {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 40rpx 0;
		padding: 0 30rpx;

		.daname {
			font-size: 30px;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		.damiao {
			font-size: 14px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			display: block;
			margin: 10rpx 0;
		}

		.daoitem {
			display: flex;
			flex-direction: row;
			margin-top: 20px;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 30px;

			.items {
				width: 31%;
				height: 100px;
				opacity: 1;
				border-radius: 12px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 6px 10px rgba(119, 102, 231, 0.08);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				text {
					font-size: 14px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					display: block;
					margin-top: 10rpx;
				}

				.boicon {
					width: 36px;
					height: 36px;
				}
			}
		}

		.shangdan {
			width: 270px;
			height: 50px;
			opacity: 1;
			border-radius: 50px;
			position: relative;
			background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
			box-shadow: 0px 0px 3px rgba(119, 102, 231, 0.63);
			margin-bottom: 20px;

			.shangbtn {
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18px;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
			}

			.mianfei {
				width: 50px;
				height: 21px;
				border-radius: 3px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 3px rgba(119, 102, 231, 0.63);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 10px;
				font-weight: 400;
				color: rgba(119, 102, 231, 1);
				position: absolute;
				right: 0;
				top: -6px;
			}
		}

		.shangdantwo {
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 3px rgba(119, 102, 231, 0.63);

			.shangbtn {
				color: rgba(119, 102, 231, 1);
			}

			.mianfei {
				background: rgba(119, 102, 231, 1);
				color: #fff;
				box-shadow: 0px 0px 3px rgba(119, 102, 231, 0.63);
			}
		}
	}

	.gengname {
		display: block;
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}
}

// 筛选弹窗开始
.pop /deep/ .u-drawer-bottom {
	background-color: transparent !important;
}

.pop /deep/.u-mode-center-box {
	background-color: transparent !important;
}

.spopview {
	border-radius: 12px 12px 0 0;
	background: rgba(248, 248, 253, 1);
	box-shadow: 0px -6px 10px rgba(119, 102, 231, 0.08);
	height: 500px;
	position: relative;
	display: flex;
	flex-direction: column;

	.guan {
		position: absolute;
		right: 20px;
		top: 20px;
		width: 18px;
		height: 18px;
		z-index: 10;
	}

	.shaione {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20px;
		max-height: 350px;
		margin-top: 30rpx;

		.shaihead {
			display: flex;
			flex-direction: column;
			margin-bottom: 20px;

			.shaitit {
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 20.27px;
				color: rgba(102, 102, 102, 1);
				display: block;
				margin-bottom: 10px;
			}

			.shailist {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.shaiitem {
					padding: 6px 28px;
					border-radius: 6px;
					background: rgba(255, 255, 255, 1);

					border: 1px solid rgba(220, 214, 255, 1);
					font-size: 12px;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
					margin: 0 5px 5px 0;
				}
			}
		}
	}

	.shaitwo {
		height: 100px;
		opacity: 1;
		border-radius: 0px 0px, 12px, 12px;
		background: rgba(248, 248, 253, 1);
		box-shadow: 0px -6px 10px rgba(119, 102, 231, 0.08);
		position: relative;
		margin-top: auto;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 15px 20px;

		.zhongzhipop {
			width: 46%;
			height: 45px;
			opacity: 1;
			border-radius: 50px;
			background: rgba(255, 255, 255, 1);

			border: 1px solid rgba(220, 214, 255, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: 700;
			color: rgba(102, 102, 102, 1);
		}

		.que {
			margin-left: auto;
			border-radius: 50px;
			border: none;
			background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
			box-shadow: 0px 0px 3px rgba(119, 102, 231, 0.63);
			color: rgba(255, 255, 255, 1);
		}
	}
}

// 筛选弹窗结束</style>
